<template>
<client-only>
  <div class="main">
    <div class="title">
      <a href="/sign" style="text-decoration: none;">登录</a>
      <span>·</span>
      <a class="active" href="/register" style="text-decoration: none;">注册</a>
    </div>  

    <div class="sign-up-container">
      <el-form ref="userForm" :model="params">

        <el-form-item class="input-prepend restyle" prop="nickname" :rules="[{ required: true, message: '请输入你的昵称', trigger: 'blur' }]" >
          <div>
            <el-input type="text" placeholder="你的昵称" v-model="params.nickname"/>
            <i class="el-icon-user"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle no-radius" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]">
          <div>
            <el-input type="text" placeholder="手机号" v-model="params.mobile"/>
            <i class="el-icon-mobile-phone"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend restyle no-radius" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
          <div style="width: 100%;display: block;float: left;position: relative">
            <el-input type="text" placeholder="验证码" v-model="params.code"/>
            <i class="el-icon-chat-dot-square"/>
          </div>
          <div class="btn" style="position:absolute;right: 0;top: 6px;width: 40%;">
            <!-- <a :disabled="disabled" href="javascript:" type="button" @click="sendCode()" :value="codeTest" style="border: none;background-color: none;text-decoration: none;" v-text="codeTest"/> -->
            <el-button :disabled="disabled" @click="sendCode()" type="text"  :value="codeTest" style="border: none;background-color: none;text-decoration: none;" v-text="codeTest"/>
          </div>
        </el-form-item>

        <el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <div>
            <el-input type="password" placeholder="设置密码" v-model="params.password"/>
            <i class="el-icon-lock"/>
          </div>
        </el-form-item>

        <div class="btn">
          <!-- <input type="button" :disabled="!checked" class="sign-up-button" value="注册" @click="submitRegister()"> -->
          <el-button type="success" round :disabled="!checked" value="注册" @click="submitRegister()" style="font-size: 17px; width: 100%;line-height: 15px;" >注 册</el-button>
        </div>
        <br>
        <p class="sign-up-msg">
          <el-checkbox v-model="checked"/>&nbsp;已阅读并同意谷粒学院
          <!-- <br> -->
          <a target="_blank" href="/agreement/user">用户协议</a>
          和
          <a target="_blank" href="/agreement/account">隐私政策</a> 。
        </p>
      </el-form>
      <!-- 更多注册方式 -->
      <div class="more-sign">
        <h6>社交帐号直接注册</h6>
        <ul>
          <li><a id="weixin" class="weixin" target="_blank" style="text-decoration: none;" href="http://huaan.free.idcfengye.com/api/ucenter/wx/login"><i
            class="iconfont icon-weixin"/></a></li>
          <li><a id="qq" class="qq" target="_blank" href="#" style="text-decoration: none;"><i class="iconfont icon-qq"/></a></li>
        </ul>
      </div>
    </div>
  </div>
</client-only>
</template>

<script>
  import '~/assets/css/sign.css'
  import '~/assets/css/iconfont.css'

  import register from '@/api/register'

  export default {
    layout: 'sign',
    data() {
      return {
        params: {
          mobile: '',
          code: '',
          nickname: '',
          password: ''
        },
        sending: true,      //是否发送验证码
        second: 60,        //倒计时间
        codeTest: '获取验证码',
        disabled: true,
        checked: false
      }
    },
    methods: {
      sendCode() {
        if ((/^1[34578]\d{9}$/.test(this.params.mobile))) {
          this.disabled = false
          register.getMobile(this.params.mobile)
            .then(response => {
              if (response.data.success) {
                this.$message({
                message: '验证码发送成功！',
                type: 'success'
              })
              this.timeDown()
              }
            })
        } else {
          this.$message.error('手机号码格式不正确')
        }
      },
      // getCodeFun() {
      //   //sending = false
      //   //his.sending原为true,请求成功，!this.sending == true，主要是防止有人把disabled属性去掉，多次点击；
      //   if (!this.sending)
      //     return;

      //   //debugger
      //   // prop 换成你想监听的prop字段
      //   this.$refs.userForm.validateField('mobile', (errMsg) => {
      //     if (errMsg == '') {
      //       registerApi.getMobile(this.params.mobile).then(res => {
      //         this.sending = false;
      //         this.timeDown();
      //       });
      //     }
      //   })
      // },

      timeDown() {
        let result = setInterval(() => {
          --this.second;
          this.codeTest = this.second
          this.disabled = true;
          if (this.second < 1) {
            clearInterval(result)
            this.sending = true
            this.disabled = false
            this.second = 60
            this.codeTest = "获取验证码"
          }
        }, 1000)
      },
      submitRegister() {
        this.$refs['userForm'].validate((valid) => {
          if (valid) {
            register.submitRegister(this.params).then(response => {
              //提示注册成功
              this.$message({
                type: 'success',
                message: "注册成功"
              })
              this.$router.push({path: '/sign'})
            })
          }
        })
      },

      checkPhone (rule, value, callback) {
        //debugger
        if (!(/^1[34578]\d{9}$/.test(value))) {
          this.disabled = true
          return callback(new Error('手机号码格式不正确'))
        }
        this.disabled = false
        return callback()
      }
    }
  }
</script>